<template>
  <div class="valid-image-code">
    <img :src="src" alt="">
    <el-button type="text" @click="getImage">看不清?换一张</el-button>
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'

  @Component()
  export default class ValidImageCode extends Vue {
    src = 'https://hpx-boss.oss-cn-qingdao.aliyuncs.com/static/logo.jpg'

    async getImage () {
      let res: AjaxResponse = await this.$axios.get('g/gateway/captcha/getCode')
      this.src = `${window.location.origin}/g${res.data.img_url}`
      this.$emit('input',res.data.picCodeKey)
    }

    mounted () {
      this.getImage()
    }
  }
</script>

<style lang="less" scoped>
  .valid-image-code {
    line-height: 40px;
  }

  img {
    width: 70px;
    height: 32px;
    vertical-align: middle;
    cursor: pointer;
  }

  .el-button {
    vertical-align: middle;
  }
</style>
